<template>
    <div id="xsms">
        <div class="title">
            <div class="xsms-title">邻居都爱买 </div>
            <div class="xsms-all">查看全部<van-icon name="arrow" /></div>
        </div>
        <div class="xsms-list">
            <van-swipe :loop="false" :width="140" :touchable="true" :show-indicators="false">
                <van-swipe-item class="xsms-item" v-for="(item, index) in 8" :key="index">
                    <div class="xsms-item-img">
                        <img class="picture" src='' alt="" />
                    </div>
                    <div class="item-title" style="margin: 6.4725px 0;">这是一个耳机...</div>
                    <div class="item-price">￥58.8 <span class="item-old-price">￥70.0</span></div>
                    <button style="margin: 0 10%; padding: .2834rem; border-radius: 5.6686rem;
                         border: 0rem; background-color: #ff0000; color: #fff;  font-size: 14.1128px;
                         ">加入购物车</button>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script setup lang="ts">

import { onMounted, ref, computed } from "vue";
// "https://tse3-mm.cn.bing.net/th/id/OIP-C.a-s6McJd6qTU6HqijUBisAHaHa?rs=1&pid=ImgDetMain"


const computedWidth = computed(() => {
    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
    return (140 / rootFontSize) + 'rem';
})

</script>

<style scoped lang="less">
#xsms {

    // margin: 1.1337rem 5%;
    border-radius: 10.0007px;
    background-color: #fff;
    padding: .8rem 1rem;

    .title {
        margin-bottom: 8.8205px;
        display: flex;
        justify-content: space-between;

        .xsms-title {
            color: #6d6d6d;
            font-weight: 600;
        }

        .xsms-all {
            color: #8b8b8b;
        }
    }

    .xsms-list {
        display: flex;
        flex-wrap: nowrap;

        .xsms-item {

            .xsms-item-img {
                width: 119.9994px;

                .picture {
                    width: 100%;
                    border-radius: 8.8205px;
                }
            }

            .item-price {
                margin: 6.4725px 0;
                color: #ff4c4c;

                .item-old-price {
                    font-size: 14.1128px;
                    text-decoration: line-through;
                    color: #ccc;
                }
            }

        }
    }
}
</style>